<template>
  <div>
    <header class="header">商品分类</header>
    <div class="sort">
      <!-- 包裹侧栏，隐藏滚动条 -->
      <div class="aside_wrapper">
        <div class="aside">
          <div v-for="item in classifyGoods" :key="item.id" class="aside_item">
            <div
              @click="active_num = item.id"
              :class="{ aside_item_box: true, active: active_num === item.id }"
            >
              {{ item.name }}
            </div>
          </div>
        </div>
      </div>
      <div class="asideView_wrapper">
        <div class="asideView">
          <nut-card
            @click="$router.push('/GoodsDetails')"
            class="product_card"
            v-for="(item, index) in [
              ...renderList,
              ...renderList,
              ...renderList,
            ]"
            :key="index"
            :img-url="item.s_goods_photos[0].path"
            :title="item.name"
            :price="price"
            :vipPrice="vipPrice"
          >
          </nut-card>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
// import { getClassifyGoods } from '../api/product'
export default {
  name: 'homeSortView',
  data () {
    return {
      // 控制目前渲染哪个分类
      active_num: 1559,
      // 渲染右侧卡片的数组
      renderList: [],
      price: '899',
      vipPrice: '699',
    }
  },
  async created () {
    // 请求商品分类数据
    await this.$store.dispatch('getClassify')
    // 动态渲染右侧商品的数组
    this.renderList = this.classifyGoods.find(
      (ele) => ele.id === this.active_num
    ).s_goods
    console.log(this.classifyGoods)
  },
  computed: {
    // 从 vuex 中获取商品分类数据
    ...mapState(['classifyGoods']),
  },
  watch: {
    // 监听 active_num 变化动态渲染数据
    active_num: {
      handler (newVal) {
        this.renderList = this.classifyGoods.find(
          (ele) => ele.id === newVal
        ).s_goods
      },
    },
  },
}

</script>

<style lang="scss" scoped>
.header {
  box-sizing: border-box;
  padding: 7.467vw 0 0 3.2vw;
  font-size: 5.867vw;
  font-weight: 700;
  height: 11vh;
  background-color: #c1ab96;
  color: #fff;
}
// 分类的主体盒子
.sort {
  display: flex;
  height: 82vh;
  // 左侧导航链接
  .aside_wrapper {
    overflow: hidden;
    width: 24vw;
  }
  .aside {
    overflow: scroll;
    width: 27.667vw;
    height: 100%;
    .aside_item {
      display: flex;
      align-items: center;
      font-size: 4.267vw;
      height: 16vw;
      text-align: center;
      padding-left: 2.48vw;
      // 左侧路由激活样式
      .aside_item_box {
        width: 18.667vw;
        border-radius: 4vw;
        height: 8.2vw;
        line-height: 8.267vw;
      }
      .active {
        background-color: #c1ab96;
        color: #fff;
      }
    }
  }
  // 右侧内容渲染区
  .asideView_wrapper {
    flex: 1;
    overflow: scroll;
  }
  .asideView {
    padding: 2.133vw;

    .product_card {
      &:nth-child(n + 2) {
        margin-top: 2.133vw;
      }
    }
  }
}
::v-deep(.nut-card .nut-card__right .nut-card__right__other) {
  display: none;
}
// 卡片图大小
::v-deep(.nut-card .nut-card__left) {
  overflow: hidden;
  border-radius: 2.133vw;
  width: 24vw;
  height: 24vw;
}
::v-deep(.nut-card .nut-card__right) {
  padding-top: 0.533vw;
}
::v-deep(.nut-card .nut-card__right .nut-card__right__price) {
  margin-top: 4.267vw;
}
::v-deep(.nut-card
    .nut-card__right
    .nut-card__right__price
    .nut-card__right__price__origin.nut-price) {
  margin-left: 1.6vw;
  color: rgb(178, 178, 178);
}
::v-deep(.nut-card .nut-card__right .nut-card__right__title) {
  height: 42px;
}
</style>